<template>
  <div class="pages">
   <div class="weui-cells__title">
     <span>已上传的轮播</span>
<!--     <view >-->
<!--       <van-button size="small" style="margin-right: 30rpx;" @click="updateItem">编辑</van-button>-->
<!--       <van-button size="small" type="danger" @click="delItem">删除</van-button>-->
<!--     </view>-->
   </div>
<!--    v-for="(item,index) in list"-->
<!--    :desc="item.description"-->
    <van-panel      >

      <view class="bannerImg">
        <createBrannerBox v-for="(item,index) in detailListCopy"@changeDom="getBanner" :key="index" :detail="item" :index="index"  @getIndex="getIndexFun"></createBrannerBox>
<!--         <div class="img" v-for="(item,index) in detailListCopy" :key="index" :class="{active:item.isClick}" @click="changeImg(index)">-->
<!--           <img :src="item.imgUrl" alt="">-->
<!--           <p>{{item.description}}</p>-->
<!--         </div>-->
      </view>
<!--      <view slot="footer">-->
<!--        <van-button size="small" style="margin-right: 30rpx;" @click="updateItem">编辑</van-button>-->
<!--        <van-button size="small" type="danger" @click="delItem">删除</van-button>-->
<!--      </view>-->
    </van-panel>

<!--    <div class="weui-cells__title">上传商品图品</div>-->

<!--    <div class="weui-cells weui-cells_form">-->
<!--      <div class="weui-cell">-->
<!--        <div class="weui-cell__bd">-->
<!--          <div class="weui-uploader">-->
<!--            &lt;!&ndash; <div class="weui-uploader__hd">-->
<!--                <p class="weui-uploader__title">图片上传</p>-->
<!--                <div class="weui-uploader__info">0/2</div>-->
<!--            </div> &ndash;&gt;-->
<!--            <div class="weui-uploader__bd">-->
<!--              <ul class="weui-uploader__files" id="uploaderFiles">-->

<!--               <li class="weui-uploader__file weui-uploader__file_status" v-for="(item,index) in images" :key="index"  v-if="images.length" @click="handleImagePreview('',index)" :style="{backgroundImage:'url('+item+')'}" >-->
<!--                 <van-icon name="close" color="#1989FA" @click="remove(index)" size="16" style="position: absolute;bottom:145rpx;right: 0;"/>-->
<!--               </li>-->
<!--              </ul>-->
<!--              <div class="weui-uploader__input-box" v-if="!images.length">-->
<!--                <input id="uploaderInput" @click="upload" class="weui-uploader__input" type="file" accept="image/*" multiple="">-->
<!--              </div>-->
<!--            </div>-->
<!--          </div>-->
<!--        </div>-->
<!--      </div>-->
<!--    </div>-->
<!--    <div class="weui-cells__title">商品标题</div>-->
<!--    <div class="weui-cells weui-cells_form">-->
<!--      <div class="weui-cell">-->
<!--        <input type="text" v-model.lazy="description">-->
<!--      </div>-->



    </div>
</template>

<script>

  import * as host from "../../utils/api"
  import createBrannerBox from "../../components/createBrannerBox"
export default {
    name: 'index',
    data () {
      return {
        description: '',
        images: [],
        list: [],
          editData:{},//点击所获取的数据
        isEdit: true,
          detailList: [{imgUrl: require('../../../static/images/cun.jpg'),defaultImg: require('../../../static/images/cun.jpg'), id: '',description:"春天",isClick:false,isEdit:false},
              {imgUrl: require('../../../static/images/xia.jpg'),defaultImg: require('../../../static/images/xia.jpg'), id: '',description:"夏天",isClick:false,isEdit:false},
              {imgUrl: require('../../../static/images/qiu.jpg'),defaultImg: require('../../../static/images/qiu.jpg'), id: '',description:"秋天",isClick:false,isEdit:false},
              {imgUrl: require('../../../static/images/dong.jpg'),defaultImg: require('../../../static/images/dong.jpg'), id: '',description:"冬天",isClick:false,isEdit:false}],
        id: '',
          detailListCopy:[],
          getEditData:{},//获取修改的数据
          index:0
      }
    },
  onPullDownRefresh(){
    this.getBanner();
    // wx.stopPullDownRefresh();
    // wx.hideLoading()

  },
    components:{
        createBrannerBox
    },
    onReady(){
        this.getBanner();
    },
    onShow () {

        wx.setNavigationBarTitle({
            title: '上传轮播'
        })
    },
    onUnload () {
        this.description =""
        this.images = []
    },
    methods: {
        getDetailFun(data){//修改后的数据
            this.getEditData=data;
         //  console.log(data)
        },
        getIndexFun(index){
            this.index=index;
              this.detailListCopy.forEach((a,i)=>{
                  a.isClick=false;
                  if(i==index){
                      a.isClick=true;
                  }
              })
                this.editData=this.detailListCopy[index];
                this.$forceUpdate()
               // console.log(this.detailList)
        },

      getBanner () {
          this.detailListCopy=this.detailList.concat([]);
       let userId = wx.getStorageSync('userId');
       //   console.log(this.detailListCopy)
        let cartId = wx.getStorageSync('cartId')
        this.$http.request({
          method: 'get',
          url: '/api/banner/list',
          body: {
            cardId: cartId,
            userId:userId
          }
        }).then((data) => {

          if (data.code == 200) {
            wx.stopPullDownRefresh();
            this.list = data.data;
           //   console.log(this.list)
            if(this.list.length){
                this.list.forEach((a,i)=>{
                    a.isClick=false;
                    a.isEdit=false;
                })

                for(let i=0;i<this.detailListCopy.length;i++){
                  this.detailListCopy[i].isEdit=false;
                    this.list.forEach((a,b)=>{
                        if(this.detailListCopy[i].defaultImg==a.defaultImg){
                            this.detailListCopy[i]=a;
                        }
                    })
                }
          //  console.log(this.detailListCopy)

            }else{
         //     console.log(this.detailList)
                this.detailListCopy=[{imgUrl: require('../../../static/images/cun.jpg'),defaultImg: require('../../../static/images/cun.jpg'), id: '',description:"春天",isClick:false,isEdit:false},
                  {imgUrl: require('../../../static/images/xia.jpg'),defaultImg: require('../../../static/images/xia.jpg'), id: '',description:"夏天",isClick:false,isEdit:false},
                  {imgUrl: require('../../../static/images/qiu.jpg'),defaultImg: require('../../../static/images/qiu.jpg'), id: '',description:"秋天",isClick:false,isEdit:false},
                  {imgUrl: require('../../../static/images/dong.jpg'),defaultImg: require('../../../static/images/dong.jpg'), id: '',description:"冬天",isClick:false,isEdit:false}]
            }

               console.log(this.detailListCopy)
          }
        })
      },

      handleImagePreview (img, index) { // 预览图片
        const idx = index
        const images = this.images
    //    console.log(images)
        wx.previewImage({
          current: images[idx], // 当前预览的图片
          urls: images // 所有要预览的图片
        })
      },
      upload (e) {
        var that = this
        let i = 0
        let upLength // 图片数组长度
        let imgFilePaths
        wx.chooseImage({
          count: 1, // 默认9
          sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
          sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
          success: function (res) {
            // console.log(res)
            // that.images.push(res.tempFilePaths[0])
            // // that. urlTobase64(res.tempFilePaths[0])
            // let len = that.files.concat(res.tempFilePaths);
            imgFilePaths = res.tempFilePaths
            upLength = imgFilePaths.length
            // if(len.length > max){
            //   that.$mptoast('图片最多只能选择' + max);
            //   return false;
            // }
            /**
           * 上传完成后把文件上传到服务器
           */
            wx.showLoading({
              title: '上传中...'
            })
            that.upLoad(imgFilePaths, i, upLength)
          }
        })
      },
      upLoad (imgPath, i, upLength) {
        let that = this
        let token = wx.getStorageSync('Authorization')
        // 上传文件
        wx.uploadFile({
          url: `${host.host}/api/qiniu/upload`,
          filePath: imgPath[i],
          name: 'file',
          header: {
            'Content-Type': 'multipart/form-data',
            'Authorization': `Bearer ${token}`
          },

          success: function (res) {
         //   console.log(res.data)
            that.images.push( JSON.parse(res.data).data)
            wx.showToast({
              title: '上传成功!',
              icon: 'success',
              duration: 2000

            })

            // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
            // that.files = that.files.concat(imgPath[i]);        //合并图片显示数组
            // let imgData = JSON.parse(res.data);
            // that.upImg.push(imgData.data);
          },
          fail: function (res) {
          //  console.log(res)
            wx.hideLoading()
            wx.showModal({
              title: '错误提示',
              content: '上传图片失败',
              showCancel: false,
              success: function (res) { }
            })
          }

        })
      },
      remove (inex) {
        this.images.splice(inex, 1)
      }
    }
  }
</script>

<style scoped>
  .bannerImg{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    box-sizing: border-box;
    padding:5%;
  }
  .outProduct{
    padding:20rpx 0;
    width: 100%;
    background-color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 28rpx;
    color: #999;
  }
  .pages{
    margin-bottom: 50px;
  }
  .img{
    width: 45%;
    text-align: center;
    margin-bottom: 20rpx;
    box-sizing: border-box;
    padding-bottom: 10rpx;
    box-shadow: 1px 1px 2px #999;
    border:1px solid transparent;
  }
  .img.active{
    border-color: rgb(61,176,243);
    border-radius: 10rpx;
  }
  .img img{
    max-width: 100%;
    height:450rpx;
  }
   .weui-uploader__bd .weui-uploader__file_status:before{
     background-color:transparent ;
   }
   .pages .weui-uploader__bd{
     margin:30rpx 0;
     overflow: inherit;
   }
</style>
